import React, {Component,createRef} from 'react';

class Cons1 extends Component {
  constructor(props) {
    super(props);
    //props 父组件传递过来的props

    //创建 refs对象  新的api
    this.nameRef = createRef();
    this.psdRef = createRef();
  }
  state = {
    value: ''
  };

  handleClick(msg) {
    // btn.onclick = function(){this-->btn}
    console.log(this,msg);// 以前
    //this --> undefined
    //希望this指向的是组件实例对象
    //方式一: 把当前函数变成箭头函数
    //方式二: 通过 .bind()方法 改变this指向
    // this.setState({})
  }
  render() {
    return (
      <div>
        {/*受控组价*/}
        {/*非受控 操作dom*/}

        <input type="text" ref={this.nameRef}/>

        <input type="text" ref={this.psdRef}/>
        <button onClick={() => {
          //非受控
          // console.log(this.refs.input.value);

          //this.nameRef就是一个dom
          console.log(this.nameRef.current.value);
          console.log(this.psdRef.current.value);
        }}>通过非受控方式拿到input里面的内容
        </button>

        <div>

          <input type="text" onChange={ev => {
            //ev.target 获取的是事件对象里面的dom元素 没有操作dom
            // console.log(ev.target);
            this.setState({
              value: ev.target.value
            })
          }}/>
          <button onClick={this.handleClick.bind(this,'哈哈哈')}>通过受控方式拿到里面的值</button>
          <h3>{this.state.value}</h3>
        </div>
      </div>
    );
  }
}

export default Cons1;
